<html><head>
<style id="resources">
#map > * *.W { background-color: #94C; }
#map > * *.M { background-color: #334; }
#map > * *.C { background-color: #7DBFE0; }
#map > * *.S { background-color: #E1BC4D; }
</style>

<style>
body { overflow: auto; margin: 0; padding: 0; background: #FFF; }
#map { overflow: hidden; }

#map > a:hover {
  z-index: 1;
  opacity: 0.5;
  outline: 1px solid #000;
}

#map > *.z   { clear: left; }
#map > *     { position: relative; float: left; }
#map > *.b   { opacity: 0.9; }
#map > * *   { position: absolute; top: 0; left: 0; opacity: 0.4; }

#map > *, #map > * div {
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-image: url("http://ecmanaut.googlecode.com/svn/trunk/sites/ikariam.org/kronos-utils/minimap.png");
}

#map > a.i0   { background-position:   0px   0px; }
#map > a.i1   { background-position:   0px -20px; }
#map > a.i2   { background-position:   0px -40px; }
#map > a.i3   { background-position:   0px -60px; }
#map > a.i4   { background-position:   0px -80px; }
#map > a.i5   { background-position:   0px -100px; }
#map > a.i6   { background-position:   0px -120px; }
#map > a.i7   { background-position:   0px -140px; }
#map > a.i8   { background-position:   0px -160px; }
#map > a.i9   { background-position:   0px -180px; }
#map > div    { background-position:   0px -200px; }
#map > a.i0 * { background-position: -20px   0px; }
#map > a.i1 * { background-position: -20px -20px; }
#map > a.i2 * { background-position: -20px -40px; }
#map > a.i3 * { background-position: -20px -60px; }
#map > a.i4 * { background-position: -20px -80px; }
#map > a.i5 * { background-position: -20px -100px; }
#map > a.i6 * { background-position: -20px -120px; }
#map > a.i7 * { background-position: -20px -140px; }
#map > a.i8 * { background-position: -20px -160px; }
#map > a.i9 * { background-position: -20px -180px; }
</style>
<script>
function $(id) { return document.getElementById(id); }

var map = {}, isles = {};
var o = urlParse(), resIDs = [, "W", "M", "C", "S"], wonders = [,
  "Hephaistos' Forge (Sulphur)", "Temple of Gaia (Marble)",
  "Garden of Dionysus (Wine)", "Temple of Athene (Crystal)",
  "Temple of Hermes (Wings)", "Ares' Stronghold (Helmet)",
  "Temple of Poseidon (Boat)", "Colossus"
];
var W = o.w || 15, H = o.h || 15, Y = o.y || 50, X = o.x || 50, S = o.s;
var C = o.c, R = o.hasOwnProperty("r") ? parseInt(o.r) : 3, T = o.t;

var Ikariam = {
  islandData:	function(d) { map = d; },
  islandTypes:  function(d) { map.t = d; },
  islandCoords: function(d) { isles = d; }
};

function urlParse(param, url) {
  if (!url) url = location.search || location.hash || "";
  var keys = {};
  url.replace(/([^=&?#]+)=([^&]*)/g, function(m, key, value) {
    keys[decodeURIComponent(key)] = decodeURIComponent(value);
  });
  return param ? keys[param] : keys;
}

function paint(id, colour, pct) {
  var i;
  if (parseInt(id, 10) == id) {
    i = isles[id];
  } else {
    var m = id.split(":");
    var x = m[0], y = m[1];
    i = map[--y][--x];
  }
  if (!i) return;
  i.c = colour;
  i.p = pct;
}

function init() {
  for (var i = 1, c; i < isles.length; i++) {
    if (!(c = isles[i])) continue;
    y = c[0]-1;
    x = c[1]-1;
    isles[i] = map[y][x];
    isles[i].i = i;
    if (i == C) {
      X = x + 1; Y = y + 1;
    }
  }

  var x, y, I, r, p, x0 = X - Math.ceil(W / 2), y0 = Y - Math.ceil(H / 2);

  try {
  if (!S) {
    var host = (document.referrer||"").match(/^[^:]*:\/*([^/]+)/);
    host = host && host[1];
    if (/^s\d+\.ikariam\./.test(host))
      S = host;
  }
  if (S) host = "http://"+ S;

  var M = $("map");
  M.style.width =  (20 * W) +"px";
  M.style.height = (20 * H) +"px";
  if (!(R & 1)) $("resources").disabled = true;

  for (c in o) {
    var coords = o[c];
    if ((m = c.match(/([.\d]+)%([#0-9a-z]+)/i))) {
      p = parseFloat(m[1]) / 100;
      c = m[2];
    } else if (c.length > 1) {
      m = c.split("/");
      p = parseFloat(m[1] || "50") / 100;
      c = m[0];
      if (/^([0-9A-F]{3}){1,2}$/i.test(c))
        c = "#"+ c;
    }
    if (!m) continue;
    coords = coords.split(",");
    for (i = 0; i < coords.length; i++) {
      paint(coords[i], c, p);
    }
  }

  //console.time("draw");
  var m = document.createDocumentFragment();
  for (y = 0; y < H; y++) for (x = 0; x < W; x++) {
    i = (map[y0+y] || {})[x0+x];
    I = document.createElement(i ? "a" : "div");
    c = !x ? "z " : "";
    if (i) {
      c += "i"+ map.t[y0+y][x0+x];
      if ((R & 2) && (i.w < 5)) // +10% mining bonus?
        c += " b";
      r = document.createElement("div");
      r.className = resIDs[i.r] +" w"+ i.w;
      I.appendChild(r);
      if (i.c) {
        r.style.backgroundColor = i.c;
        r.style.opacity = i.p + "";
      }
      I.title = i.n +" ["+ (x0+x+1) +":"+ (y0+y+1) +
        "] ("+ resIDs[i.r] +", "+ wonders[i.w] +")";
      if (S) I.href = host + "/index.php?view=island&id="+ i.i;
      if (T) I.target = T;
    }
    I.className = c;
    m.appendChild(I);
  }
  M.appendChild(m);
  }catch(e){alert(e);}
  //console.timeEnd("draw");
}

</script>
<script src="ikariam-islandData.js"></script>
<script src="ikariam-islandTypes.js"></script>
<script src="ikariam-islandCoords.js"></script>
<base id="server"/>
</head><body onload="init()">

<div id="map"></div>

</body></html>
